A website style guide for cosmos.so, the place to find, save and organize visual inspiration.
Assignment 1, Web Basics.
I chose Cosmos because it is where designers build a point of view, which is the audience I want for my own portfolio.
Help people find and keep visual inspiration.
The goal is to get visitors to sign up or download the app so they keep building their own collections. Everything else on the site supports that one action.
Calm, curious, assured, understated, tasteful.
The site never shouts. The home page headline reads Find your next lamp with character, a quiet invitation and not a sales pitch. The object in the headline changes, which shows how broad the library is without any hype. Labels are short and plain, and the images do most of the talking.
Same voice, adjusted for the job.
Upscale but approachable. Editorial, like a gallery.
Students, creatives, makers and curious people.
Cosmos speaks to design students, working creatives, people planning a project at home, and brands who want to be seen. I am one of them, a design student who wants to see how professionals think about references, so I start from myself.
Me, the student researcher: I need good references quickly, I want to sort them by project, and I want to see what current taste looks like before I design my own portfolio.
The home page, in boxes.
Desktop layout. Dashed boxes are content areas, in the order they appear on the page.
What opens when you click any image. The picture stays large on the left, and the actions sit in a narrow column on the right.
Caption: artist, title, year
Saved by 63 others
Explore, where users browse, is a wall of images of different sizes in five columns, as in the collection image above. Sequence and Shop are also linked from the main navigation but are not drawn here.